<template>
    <!-- 可视化报表 -->
    <div class="df fd-c w100 h100 box">
        <div class="top">
            <centerHeader @time_filter_click="time_filter_click" :time_filter_flag="time_filter_flag"
                @allClick="allClick" :all_flag="all_flag" :headerText="headerText"></centerHeader>
            <!-- <div style="" class="df jc-sb">
                <h4>可视化报表</h4>
                <el-input suffix-icon="el-icon-search" placeholder="搜索表单" style=""></el-input>
            </div>
            <div class="df jc-sb timeFilter">
                <div style="color: #39f;">快捷筛选</div>
                <ul class="df uu">
                    <div>时间筛选:</div>
                    <li v-for="(item, index) in fastFilter" :key="index"
                        :class="time_filter_flag == index ? 'timeFilterColor' : ''" @click="time_filter_click(index)">
                        {{ item.name }}
                    </li>
                </ul>
            </div> -->
        </div>
        <div class="content">
            <div class="swiper-container">
                <div class="swiper-wrapper">
                    <div class="swiper-slide">
                        <img src="../../assets/login_second/1.png" alt="" style="width: 100%;height: 100%;">
                    </div>
                    <div class="swiper-slide"> <img src="../../assets/login_second/1.png" alt=""
                            style="width: 100%;height: 100%;"></div>
                    <div class="swiper-slide"> <img src="../../assets/login_second/1.png" alt=""
                            style="width: 100%;height: 100%;"></div>
                </div>
                <div class="swiper-pagination"></div>
                <div class="swiper-button-prev"></div>
                <div class="swiper-button-next"></div>
            </div>
        </div>
    </div>
</template>

<script>
import Swiper from "swiper";
import centerHeader from "./centerHeader.vue";
export default {
    components: { centerHeader },
    data() {
        return {
            mySwiper: null,
            time_filter_flag: 0, //时间筛选切换
            all_flag: 0,
            headerText: "可视化报表",
        };
    },
    mounted() {
        this.mySwiper = new Swiper(".swiper-container", {
            autoplay: 3000, //可选选项，自动滑动
            loop: true, //可选选项，开启循环
            pagination: ".swiper-pagination",
            prevButton: ".swiper-button-prev",
            nextButton: ".swiper-button-next",
        });
    },
    methods: {
        time_filter_click(index) {
            //时间筛选点击事件
            console.log(index);
            this.time_filter_flag = index;
        },
        allClick(index) {
            this.all_flag = index;
        },
    },
};
</script>

<style lang="scss" scoped>
.swiper-slide {
    background-color: #d9e2f9;
    // border-radius: 10px;
}

.top {
    height: 150px;

    h4 {
        font-weight: 600;
    }

    .el-input {
        border-radius: 50px;
        width: 380px;
        height: 50px;
    }

    ::v-deep .el-input__inner {
        border-radius: 50px !important;
    }

    ::v-deep .el-input__icon {
        height: 0;
    }

    .timeFilter {
        padding: 0 30px;
        font-size: 14px;

        .uu {
            >div {
                padding: 3px 8px;
            }

            li {
                padding: 3px 8px;
                background-color: #fff;
                margin-left: 10px;
                box-shadow: 0 0 5px 0 #ccc;
            }

            .timeFilterColor {
                background-color: #3c6cfe;
                color: #fff;
            }
        }
    }
}

.content {
    // background-color: #fff;
    height: 100%;
    width: 100%;
    overflow: scroll;
    padding: 0 30px;
}

.box {
    width: 100%;
    height: calc(100% - 120px);
    overflow: hidden;
}

.swiper-container {
    width: 100%;
    height: 100%;
    border-radius: 10px;
    overflow: hidden;
}
</style>

<style type="text/css">
.pagination {
    position: absolute;
    z-index: 20;
    bottom: 10px;
    width: 100%;
    text-align: center;
}

.swiper-pagination-switch {
    display: inline-block;
    width: 8px;
    height: 8px;
    border-radius: 8px;
    background: #555;
    margin: 0 5px;
    opacity: 0.8;
    border: 1px solid #fff;
    cursor: pointer;
}

.swiper-active-switch {
    background: #fff;
}
</style>
